<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="../bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
<script src="/js/vue.js"></script>
<script src="/element-ui/lib/index.js"></script>
	<link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
	<script src="/js/axios.min.js"></script>
	<script src="/js/treeutil.js"></script>
<script type="text/javascript">

	//页面加载完毕
	$(function(){
		
		//导航中所有文本颜色为黑色
		$(".liClass > a").css("color" , "black");
		
		//默认选中导航菜单中的第一个菜单项
		$(".liClass:first").addClass("active");
		
		//第一个菜单项的文字变成白色
		$(".liClass:first > a").css("color" , "white");
		
		//给所有的菜单项注册鼠标单击事件
		$(".liClass").click(function(){
			//移除所有菜单项的激活状态
			$(".liClass").removeClass("active");
			//导航中所有文本颜色为黑色
			$(".liClass > a").css("color" , "black");
			//当前项目被选中
			$(this).addClass("active");
			//当前项目颜色变成白色
			$(this).children("a").css("color","white");
		});
		
		
		window.open("main/index.html","workareaFrame");
		
	});
	
</script>

</head>
<body>
<div id="app">
	<!-- 我的资料 -->
	<div class="modal fade" id="myInformation" role="dialog">
		<div class="modal-dialog" role="document" style="width: 30%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">我的资料</h4>
				</div>
				<div class="modal-body">
					<div style="position: relative; left: 40px;">
						姓名：<b>{{user.name}}</b><br><br>
						登录帐号：<b>{{user.loginAct}}</b><br><br>
						邮箱：<b>{{user.email}}</b><br><br>
						失效时间：<b>{{user.expireTime}}</b><br><br>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>



	
	<!-- 顶部 -->
	<div id="top" style="height: 50px; background-color: #3C3C3C; width: 100%;">
		<div style="position: absolute; top: 5px; left: 0px; font-size: 30px; font-weight: 400; color: white; font-family: 'times new roman'">CRM &nbsp;<span style="font-size: 12px;">&copy;2023&nbsp;动力节点</span></div>
		<div style="position: absolute; top: 15px; right: 15px;">
			<ul>
				<li class="dropdown user-dropdown">
					<a href="javascript:void(0)" style="text-decoration: none; color: white;" class="dropdown-toggle" data-toggle="dropdown">
						<span class="glyphicon glyphicon-user"></span> {{user.name}} <span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li><a href="../settings/index.html"><span class="glyphicon glyphicon-wrench"></span> 系统设置</a></li>
						<li><a href="javascript:void(0)" data-toggle="modal" data-target="#myInformation"><span class="glyphicon glyphicon-file"></span> 我的资料</a></li>
						<li><a href="javascript:void(0)" @click="dialogFormVisible=true"><span class="glyphicon glyphicon-edit"></span> 修改密码</a></li>
						<li><a href="javascript:void(0);" data-toggle="modal" data-target="#exitModal"><span class="glyphicon glyphicon-off"></span> 退出</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
	
	<!-- 中间 -->
	<div id="center" style="position: absolute;top: 50px; bottom: 30px; left: 0px; right: 0px;">
	
		<!-- 导航 -->
		<div id="navigation" style="left: 0px; width: 18%; position: relative; height: 100%; overflow:auto;">
		
			<ul id="no1" class="nav nav-pills nav-stacked">
				<li v-for="(item,index) in menus" class="liClass">
					<a :href="item.url" target="workareaFrame">
						<span :class="item.icon"></span>
						{{item.pname}}
					</a>
					<ul class="nav nav-pills nav-stacked">
						<li v-for="child in item.children"  class="liClass">
							<a :href="child.url" target="workareaFrame">&nbsp;&nbsp;&nbsp;
								<span :class="child.icon"></span>
								{{child.pname}}
							</a>
						</li>
					</ul>
				</li>
				<!--<li class="liClass"><a href="javascript:void(0);" target="workareaFrame"><span class="glyphicon glyphicon-file"></span> 报表</a></li>
				<li class="liClass">
					<a href="javascript:void(0);" target="workareaFrame">
					<span class="glyphicon glyphicon-shopping-cart"></span>
					 销售订单</a></li>
				<li class="liClass"><a href="javascript:void(0);" target="workareaFrame"><span class="glyphicon glyphicon-send"></span> 发货单</a></li>
				<li class="liClass"><a href="javascript:void(0);" target="workareaFrame"><span class="glyphicon glyphicon-earphone"></span> 跟进</a></li>
				<li class="liClass"><a href="javascript:void(0);" target="workareaFrame"><span class="glyphicon glyphicon-leaf"></span> 产品</a></li>
				<li class="liClass"><a href="javascript:void(0);" target="workareaFrame"><span class="glyphicon glyphicon-usd"></span> 报价</a></li>
			-->
			</ul>
			
			<!-- 分割线 -->
			<div id="divider1" style="position: absolute; top : 0px; right: 0px; width: 1px; height: 100% ; background-color: #B3B3B3;"></div>
		</div>
		
		<!-- 工作区 -->
		<div id="workarea" style="position: absolute; top : 0px; left: 18%; width: 82%; height: 100%;">
			<iframe style="border-width: 0px; width: 100%; height: 100%;" name="workareaFrame"></iframe>
		</div>
		
	</div>
	
	<div id="divider2" style="height: 1px; width: 100%; position: absolute;bottom: 30px; background-color: #B3B3B3;"></div>
	
	<!-- 底部 -->
	<div id="down" style="height: 30px; width: 100%; position: absolute;bottom: 0px;"></div>

<!--修改密码的弹框-->
	<el-dialog title="修改密码" :visible.sync="dialogFormVisible">
		<el-form>
			<el-form-item label="原始密码" :label-width="formLabelWidth">
				<el-input v-model="oldPsw" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="新密码" :label-width="formLabelWidth">
				<el-input v-model="newPsw" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="确认密码" :label-width="formLabelWidth">
				<el-input v-model="repeatPsw" autocomplete="off" @blur="checkPsw"></el-input>
			</el-form-item>
			<el-form-item :label-width="formLabelWidth">
				<span style="color: red">{{msg}}</span>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogFormVisible = false">取 消</el-button>
			<el-button type="primary" @click="savePsw">确 定</el-button>
		</div>
	</el-dialog>
</div>
<script>
	new Vue({
		el:"#app",
		data:{
			oldPsw:undefined,
			newPsw:undefined,
			repeatPsw:undefined,
			dialogFormVisible:false,
			formLabelWidth:"120px",
			user:{
				id:undefined,
				name:undefined,
				loginAct:undefined,
				email:undefined,
				expireTime:undefined
			},
			msg:undefined,
			menus:[],//动态菜单
		},
		methods:{
			//获取登录成功之后保存的用户信息
			getUserData(){
				let userJson=sessionStorage.getItem("user");
				let userObj=JSON.parse(userJson);
				this.user={...userObj}
			},
			checkPsw(){//检测两次密码输入是否一致
				if (this.newPsw!=this.repeatPsw){
					this.msg="两次密码输入不一致";
					return false;
				}else{
					this.msg="";
					return true;
				}
			},
			savePsw(){//保存密码
				if (this.checkPsw()){
					axios.post(`/user/editPsw?id=${this.user.id}&oldPassword=${this.oldPsw}&newPassword=${this.newPsw}`)
					.then(resp=>{
						let data=resp.data;
						if (data.code==200){
							this.dialogFormVisible=false;
							this.$message({
								message: '恭喜你，密码修改成功',
								type: 'success'
							});
							location.href="/login.html"
						}else{
							this.msg=data.msg
						}
					})
				}
			},
			getPermissionByUserId(){
				let user=JSON.parse(sessionStorage.getItem("user"))
				axios.get(`/permission/getPermissionsByUserId?userId=${user.id}`).then(resp=>{
					let data=resp.data;
					if (data.result.length==0){
						this.$message({
							message: "该用户暂未分配角色,请联系管理员",
							type:"warning"
						})
					}
					//将平级数据结构转成树形结构
					this.menus=dataToTree(data.result);
					console.log(this.menus)
				})
			}
		},
		created(){
			this.getUserData();
			this.getPermissionByUserId();
		}
	})
</script>
</body>
</html>